<!--
  author: tangcheng_cd
  create by: 2018/6/9
  descr: 选择表列对话框
-->
<template>
  <el-dialog
    title="选择物理表字段"
    :visible.sync="dialogVisiable"
    @close="ardCancelBtnClick"
    class="select-meta-table-dialog"
    width="900px">
    <el-row>
      <el-col span="12" class="left-box">
        <div class="search-box">
          <el-input
            placeholder="输入物理表名称搜索"
            auto-complete="on"
            class="pull-right"
          >
            <el-button type="primary"
                       slot="append"
                       icon="el-icon-search">
            </el-button>
          </el-input>
        </div>
        <meta-table-grid
          ref="metaTableGrid"
          :paginationLayout="'total, sizes, jumper'"
          :display-columns="metaTableColumns">
        </meta-table-grid>
      </el-col>
      <el-col span="12" class="right-box">
        <div class="search-box">
          <el-input
            placeholder="输入字段名称搜索"
            auto-complete="on"
            class="pull-right"
          >
            <el-button type="primary"
                       slot="append"
                       icon="el-icon-search">
            </el-button>
          </el-input>
        </div>
        <meta-table-grid
          ref="metaTableGrid"
          :paginationLayout="'total, sizes, jumper'"
          :display-columns="metaTableColumns">
        </meta-table-grid>
      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
      <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
  import metaTableGrid from '../metaTableManager/metaTable'

  export default {
    components: {
      metaTableGrid
    },
    name: 'select-meta-table-column-dialog',
    data () {
      return {
        dialogVisiable: false // 默认隐藏
      }
    },
    computed: {
      metaTableColumns () {
        return ['meta_id', 'table_name', 'table_name_cns']
      }
    },
    methods: {
      // 取消操作
      ardCancelBtnClick () {
        this.dialogVisiable = false
      },
      // 显示
      show (submitHandler) {
        this.dialogVisiable = true
        this.submitHandler = submitHandler
      },
      // 提交数据
      submitFormData () {
        let selections = this.$refs.metaTableGrid.getSelections()
        if (this.submitHandler(selections)) {
          this.dialogVisiable = false
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .select-meta-table-dialog
    .el-dialog
      padding 15px 15px
      .el-dialog__body
        height 260px
        padding 0px 0px
        .el-row
          height 100%
          .search-box
            width 250px
          .left-box
            height 100%
            position relative
            overflow hidden
            padding-right 5px
          .right-box
            height 100%
            position relative
            overflow hidden
      .el-dialog__footer
        padding 10px 20px 10px
</style>
